@extends('app')
@section('title', '用户登录')
@section('content')
    <el-row :gutter="24" justify="center" class="el-row--flex">
        <el-col :xs="22" :sm="14" :md="10" :lg="9" :xl="6" >
            <div class="login-title">登录</div>
            <el-form label-position="left" label-width="80px" ref="login" :model="loginForm" :rules="rules">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
@endsection

@section('script')
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    loginForm: {
                        username: '',
                        password: '',
                    },
                    showMenu: false,
                    rules: {
                        username: [
                            {required: true, message: '请输入账号', trigger: 'blur'},
                            {min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur'}
                        ],
                        password: [
                            {required: true, message: '请输入密码', trigger: 'blur'},
                            {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
                        ],
                    }
                }
            },
            methods:{
                login(){
                    this.$refs['login'].validate(valid => {
                        if (valid){
                            request.post('{{ MODULE_URL }}/user/login',this.loginForm).then(res => {
                                this.$message.success(res.message)
                                location.href = '{{ MODULE_URL }}/user'
                            }).catch(() => {})
                        }
                    })
                }
            }
        })
    </script>
@endsection
@section('style')
    <style>
        .login-title{
            background: rgb(48, 49, 51);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            border-radius: 4px 4px 0 0;
            margin-bottom: 10px;
            text-align: center;
            color: #ffffff;
            padding: 10px;
        }
    </style>
@endsection

